import { SERVICE_API } from "@/components/CommonConstants"
import { RoleModel } from "@/components/model"
import useRpcApi from "@/hooks/useRpcApiHook"
import { Alert, Button, Form, Input, Modal, Select, message } from "antd"
import React, { useEffect, useState } from "react"
import { UserModel } from "."
import { ProForm } from "@ant-design/pro-components"


interface BindRoleModalProps {
    open: boolean
    user: UserModel
    handleCancel: () => void
    handleOk: () => void
}

interface SelectOption {
    label: string;
    value: string;
}

function BindRoleModal({ open, user, handleCancel, handleOk }: BindRoleModalProps) {

    const { pageQuery, apiRpc } = useRpcApi()
    // Usage of DebounceSelect

    const [value, setValue] = useState<string[]>([]);
    const [options, setOptions] = useState<SelectOption[]>([]);

    useEffect(() => {
        setValue([])
        if (open) {
            fetchResourceQueryPage("")
        }
    }, [open])

    function fetchResourceQueryPage(input: string) {

        pageQuery(SERVICE_API.ROLE_QUERY_PAGE, 1, 20, {
            "role_name": input,
            "unbound_user": user.userid
        })
            .then(res => {
                console.log(`res length= ${res.data.length}`)
                return res
            })
            .then(res => res.data.map(row => {
                return {
                    label: row.role_name,
                    value: row.role_code,
                }
            }))
            .then(options => setOptions(options))
    }


    function bindRole(roleCodes: string[]) {
        apiRpc(SERVICE_API.USER_ROLE_BIND, {
            userid: user.userid,
            role_codes: roleCodes
        })
            .then((_res) => {
                handleOk()
            })
            ;
    }


    return (
        <Modal title="角色绑定" open={open} width={600} footer={null} onCancel={handleCancel} >
            <ProForm onFinish={async () => bindRole(value)}
                submitter={{
                    render: (props, _) => {
                        return [
                            <Button type="primary" onClick={() => props.form?.submit?.()}>提交</Button>,
                            <Button onClick={() => handleCancel()}>关闭</Button>,
                        ];
                    },
                }}
            >
                {/* 管理角色下拉框 */}
                <Form.Item valuePropName="checked">
                    <Select
                        showSearch
                        mode="multiple"
                        value={value}
                        placeholder="搜索"
                        defaultActiveFirstOption={false}
                        suffixIcon={null}
                        filterOption={false}
                        notFoundContent={null}
                        onSearch={fetchResourceQueryPage}
                        onChange={setValue}
                        options={options as SelectOption[]}
                    />
                </Form.Item>
                {options.length == 0 ?
                    <Form.Item>
                        <Alert message="无更多未关联权限" type="warning" showIcon />
                    </Form.Item>
                    : ""}

            </ProForm>

        </Modal >
    )
}

export default BindRoleModal;
